<template>
  <section>
    <div class="flex-start">
      <div style="width:456px;">
        <div class="titleSty">司机选择</div>
        <driver-select-table ref="driver"
                             v-on="$listeners"
                             @active="handleActive" />
      </div>
      <div class="relevanceSty">
        <icon-svg class-name="iconSty"
                  icon-name="guanliancheliang" />
        <div class="mt5">关联车辆</div>
      </div>
      <div style="width:456px;">
        <div class="titleSty">车辆选择</div>
        <vehicle-select-table ref="vehicle"
                              v-on="$listeners"
                              @active="handleActive" />
      </div>
    </div>
    <div class="mt20">
      <span class="active-label">已选</span>
      <span class="active-info"> 司机: {{driverObj.name || '--'}}；车辆：{{vehicleObj.plateNo || '--'}}</span>
    </div>
    <div class="footer_buts">
      <el-button type="default"
                 @click="close">取消</el-button>
      <el-button type="primary"
                 @click="handleSubmit">确定</el-button>
    </div>
  </section>
</template>

<script>
import { dialogFulfill } from '@tablra/fulfill/executors/RequestExecutor'
import axios from "axios";
import DriverSelectTable from "./DriverSelectTable.vue"
import VehicleSelectTable from "./VehicleSelectTable.vue"
export default {
  name: "SelfSupport",
  components: {
    DriverSelectTable,
    VehicleSelectTable
  },
  inheritAttrs: true,
  props: {
    waybillId: Number,
    waybillIds: Array,
    url: {
      type: String,
      default: null
    },
    detailFlag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      driverObj: {},
      vehicleObj: {},
    };
  },
  computed: {
    taskUrl () {
      return `/tenant/task/{id}`
    },
    idCountExceeded () {
      return this.waybillIds?.length || 0
    }
  },
  methods: {
    close () {
      if (this.detailFlag) {
        this.$emit("close");
      } else {
        this.$emit("changeActive", 0);
        this.$emit("cancel");
      }
    },
    dispatch (data) {
      return axios({
        method: "POST",
        url: this.url,
        data
      });
    },
    handleActive (active) {
      if (active.type === 'driver') {
        this.driverObj = active;
      } else {
        this.vehicleObj = active;
      }
    },
    async handleSubmit () {
      let driverEX = this.$refs.driver?.selectData;
      let vehicleEX = this.$refs.vehicle?.selectData;
      if (!driverEX || !vehicleEX) {
        return this.$message.warning(`请选择${!driverEX ? '司机' : '车辆'}！`)
      }
      if (this.detailFlag) {
        this.$emit("submit", {
          driverId: driverEX?.driverId,
          vehicleId: vehicleEX?.vehicleId
        });
      } else {
        const { driverId } = driverEX || {};
        const { vehicleId } = vehicleEX || {};
        const params = {
          driverId,
          vehicleId,
          waybillId: this.waybillId,
          waybillIds: this.waybillIds,
        };
        if (this.waybillIds?.length) {
          params.name = "批量调度"
        }
        const response = await this.waybillBatch(params)
        const taskId = response?.data
        if (taskId) {
          this.$emit("cancel");
          const component = {
            taskUrl: this.taskUrl,
            count: this.idCountExceeded,
            name: `批量调度`,
            id: taskId
          }
          dialogFulfill.invoke(component)
        }
      }
    },
    async waybillBatch (params) {
      try {
        const response = await this.dispatch(params);
        if (!response?.data && response.code === 0) {
          this.cleanSelect();
          this.$message({ type: "success", message: "调度成功" });
          this.$emit("confirm");
        }
        return response
      } catch (error) {
        this.disabled = false;
      }
    },
    cleanSelect () {
      this.$emit("changeActive", 0);
      this.$refs.driver.clean();
      this.$refs.vehicle.clean();
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-start {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titleSty {
  width: 200px;
  height: 14px;
  border-left: 2px solid var(--prev-color-primary);
  padding-left: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
.relevanceSty {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: var(--prev-border-color-lightgrey);
  opacity: 1;
  margin: 0 10px;
  text-align: center;
}
.mt5 {
  margin-top: 5px;
}
.mt20 {
  margin-top: 20px;
}
.footer_buts {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.iconSty {
  width: 22px;
  height: 11px;
}
.active-label {
  background-color: var(--prev-color-primary);
  color: var(--prev-bg-white);
  padding: 5px 10px;
  border-radius: 3px 0 0 3px;
}
.active-info {
  background-color: rgb(255, 246, 242);
  color: var(--prev-color-primary);
  padding: 5px 10px;
  border-radius: 0 3px 3px 0;
}
</style>